<!DOCTYPE html>
<html>

	<head>
		<title>BootstrapWP</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="style.css">
		<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
		<meta charset="utf-8">




	</head>

	<body class="bg-light">
		<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
		 crossorigin="anonymous"></script>
		<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
		 crossorigin="anonymous"></script>
		<script src="./bootstrap/js/bootstrap.min.js"></script>




		<div class="container-fluid   ">
			<div class="row shadow mb-5  rounded" style="padding: 0px;overflow: hidden;">
				<div class="col-3  ">
					<div class="row  ">
						<div class="col-10 " style="height: 544px;background-color: rgba(0, 0, 0, 0);">
							<div class="logo" style="height: 120px;padding: 10px;">
								<h1>zhiyu</h1>
							</div>
							<div class="row">
								<div class="col-12 ">
									<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical" style="background-color: rgba(0, 0, 0, 0);">
										<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab"
										 aria-controls="v-pills-home" aria-selected="true">首页</a>
										<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab"
										 aria-controls="v-pills-profile" aria-selected="false">下载管理</a>
										<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab"
										 aria-controls="v-pills-messages" aria-selected="false">设置</a>
										<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab"
										 aria-controls="v-pills-settings" aria-selected="false">关于</a>
									</div>
								</div>

							</div>


						</div>
						<div class="col-2 bg-light" style="height: 544px;opacity:0.75;margin: 0;">

						</div>

					</div>
				</div>

				<div class="col-9 no-gutters bg-light" style="height: 40px;opacity:0.75;-webkit-app-region: drag;">



					<nav class="navbar" style="height:100%;margin: 0;padding: 0;">
						<div class="row no-gutters" style="padding-left:555px ;">
							<div class="col-6 nn " style="-webkit-app-region: no-drag;"> <img src="./bootstrap/icons/Dash.svg" alt="" width="25"
								 height="25" title="Bootstrap" style="float: left;"></div>
							<div class="col-6 mm " style="-webkit-app-region: no-drag;"> <img src="./bootstrap/icons/X-circle.svg" alt=""
								 width="25" height="25" title="Bootstrap"></div>
						</div>
					</nav>


					<div class="row">
						<div class="col-12 bg-light" style="height: 504px;
							  background-color: rgba(0, 0, 0, 0.75);">
							<nav aria-label="breadcrumb" style="height: 30px!important;">
								<ol class="breadcrumb" style="height: 30px!important;padding: 3px!important;padding-left: 8px!important;">
									<li class="breadcrumb-item active" aria-current="page">

										<div class="tab-content" id="v-pills-tabContent">
											<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">首页</div>
											<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">下载管理</div>
											<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">设置</div>
											<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">关于</div>
										</div>

									</li>
								</ol>
							</nav>


							<div class="no-gutters" style="height:100%;width: 270px;padding-top: 5px;">
								<form class="form-inline   no-gutters" style="width: 270px;">
									<input class="form-control mr-sm-2" type="search" placeholder="搜索" style="height: 30px;width:200px;">
									<button class="btn btn-success" type="submit" style="height: 30px;display: block;padding: 0;width: 50px;">搜索</button>
								</form>
							</div>
							<div class="card" style="width: 18rem;">
								<img src="..." class="card-img-top" alt="...">
								<div class="card-body">
									<h5 class="card-title">Card title</h5>
									<p class="card-text"></p>
									<a href="#" class="btn btn-primary">点击下载</a>
								</div>
							</div>

						</div>










					</div>
				</div>
			</div>
		</div>










	</body>

</html>
